<template>
  <div class="footer">
    <van-button
      @click="showPop"
      class="write-btn"
      round
      size="small"
      type="default"
    >写评论</van-button>
    <van-icon
      :badge="comCount"
      class="comment-icon"
      name="comment-o"
    />
    <van-icon
      :color="article.is_collected ? 'orange' : ''"
      :name="article.is_collected ? 'star' : 'star-o'"
      @click="colCancolArticle"
    />
    <van-icon
      :color="article.attitude === 1 ? '#e5645f' : ''"
      :name="article.attitude === 1 ? 'good-job' : 'good-job-o'"
      @click="zanCanzanArticle"
    />

    <publish-comment ref="pubcom" type="article" />
  </div>
</template>

<script>

import PublishComment from '../../../components/publish-comment/publish-comment'

import {
  addCollect,
  deleteCollect,
  addLike,
  deleteLike
} from "../../../network/article";

export default {
  name: "ArticleFooter",
  components: {PublishComment},
  watch: {},
  props: {
    article: {
      type: Object,
      required: true
    },
    comCount: {
      type: Number
    }
  },
  data() {
    return {
      
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    //收藏或取消收藏文章
    async colCancolArticle() {
      if (this.article.is_collected) {
        //取消收藏
        const result = await deleteCollect(this.article.art_id);
        if (result.data === "") {
          this.$toast.success("取消成功");
          this.article.is_collected = false;
          return;
        }
        this.$toast.fail("取消失败");
      } else {
        // 收藏
        const result = await addCollect(this.article.art_id);
        if (result.message === "OK") {
          this.$toast.success("收藏成功");
          this.article.is_collected = true;
          return;
        }
        this.$toast.fail("收藏失败");
      }
    },
    //赞或者取消赞
    async zanCanzanArticle() {
      if (this.article.attitude === 1) {
        // 取消赞
        const result = await deleteLike(this.article.art_id);
        console.log(result);
        if (result.data === "") {
          this.article.attitude = -1;
          return;
        }
        this.$toast.fail("取消失败");
      } else {
        // 赞👍
        const result = await addLike(this.article.art_id);
        console.log(result);
        if (result.message === "OK") {
          this.article.attitude = 1;
          return;
        }
      }
    },
    //显示弹出层
    showPop() {
      this.$refs.pubcom.isShow()
    }
 
  }
};
</script>

<style scoped lang="stylus">
.footer
  position fixed
  left 0
  right 0
  bottom 0
  box-sizing border-box
  display flex
  justify-content space-around
  align-items center
  height 44px
  border-top 1px solid #d8d8d8
  background-color #fff

  .write-btn
    width 160px

  .van-icon
    font-size 20px

  .comment-icon
    bottom -2px

  .share-icon
    bottom -2px


</style>